// src/app/workspace/[workspaceId]/toolbar.tsx
'use client';
import React, {useEffect, useState} from 'react';
import {Button} from "@/components/ui/button";
import {Info, Search} from "lucide-react";
import {useWorkspaceId} from "@/hooks/social/use-workspace-id";
import {useGetWorkspace} from "@/features/workspaces/api/use-get-workspace";
import {Channel, Member, Workspace} from "@/lib/social/types";

import {
    Command,
    CommandDialog,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList, CommandSeparator
} from "@/components/ui/command";
import {useGetChannels} from "@/features/channels/api/use-get-channels";
import {useGetMembers} from "@/features/members/api/use-get-members";
import Link from "next/link";

const Toolbar = () => {
    const [open, setOpen] = useState(false)

    const workspaceId = useWorkspaceId()
    const [workspace, setWorkspace] = useState<Workspace | null>();
    useEffect(() => {
        (async () => {
            if (!workspaceId) return
            const {data, isLoading} =
                await useGetWorkspace({id: workspaceId as string})
            if (isLoading) return
            setWorkspace(data)
        })()
    }, [workspaceId]);

    const [channels, setChannels] = useState<Channel[]>()
    const [members, setMembers] = useState<Member[]>()
    const [loading, setLoading] = useState(false)
    useEffect(() => {
        (async () => {
            const {data, isLoading} = await useGetChannels({workspaceId})
            setChannels(data)

            const {data: membersData, isLoading: membersLoading}
                = await useGetMembers({workspaceId})
            setMembers(membersData)
            setLoading(isLoading || membersLoading)
        })()
    }, [workspaceId])

    if (!channels || !members || loading) return <div>loading...</div>

    return (
        <nav className={`bg-[#481349]x bg-blue-600/80 flex items-center justify-between h-10 p-1.5`}>
            <div // 占位
                className={`flex-1`}
            />
            <div className={`min-w-[280px] max-w-[642px] grow-[2] shrink`}>
                <Button
                    onClick={() => setOpen(true)}
                    size={'sm'} className={`bg-accent/25 hover:bg-accent-25 w-full justify-start
                h-7 px-2`}>
                    <Search className={`size-4 text-white mr-2`}/>
                    <span className={`text-white text-xs`}>Search {workspace?.name}</span>
                </Button>

                <CommandDialog open={open} onOpenChange={setOpen}>
                    <CommandInput placeholder={`Type a command or search...`}/>
                    <CommandList>
                        <CommandEmpty>No Result found.</CommandEmpty>
                        <CommandGroup heading={`Channels`}>
                            {channels && channels.map(c => (
                                <Link key={c.id} href={`/social/workspace/${workspaceId}/channel/${c.id}`}>
                                    <CommandItem
                                        onSelect={()=>setOpen(false)}
                                        // onClick={() => router.replace(`/workspaces/${workspaceId}/channel/${c.id}`)}
                                    >
                                        {c.name}
                                    </CommandItem>
                                </Link>
                            ))}
                        </CommandGroup>
                        <CommandSeparator/>
                        <CommandGroup heading={`Members`}>
                            {members && members.map(m => (
                                <Link key={m.id} href={`/social/workspace/${workspaceId}/member/${m.id}`}>
                                    <CommandItem
                                        onSelect={()=>setOpen(false)}
                                        // onClick={() => router.replace(`/workspaces/${workspaceId}/member/${m.id}`)}
                                    >
                                        {/*{m.user.name}*/}
                                        {m.userId}
                                    </CommandItem>
                                </Link>
                            ))}
                        </CommandGroup>
                    </CommandList>
                </CommandDialog>
            </div>
            <div className={`ml-auto flex-1 flex items-center justify-end`}>
                <Button variant={'transparent'} size={"iconSm"}>
                    <Info className={`size-5 text-white`}/>
                </Button>
            </div>
        </nav>
    );
};

export default Toolbar;